<template>
  <div>
    <!-- 操作按钮 -->
    <el-button type="primary" size="small" @click="handleAdd" style="margin-bottom: 10px">
      新增工作经历
    </el-button>

    <!-- 工作经历列表 -->
    <h3>工作经历列表</h3>
    <el-table :data="workExperienceList" border style="width: 100%" v-loading="loading">
      <el-table-column prop="companyName" label="公司名称" align="center" />
      <el-table-column prop="position" label="职位" align="center" />

      <!-- 开始日期 -->
      <el-table-column label="开始日期" align="center">
        <template #default="scope">
          {{ formatDate(scope.row.startDate) }}
        </template>
      </el-table-column>

      <!-- 结束日期 -->
      <el-table-column label="结束日期" align="center">
        <template #default="scope">
          {{ formatDate(scope.row.endDate) }}
        </template>
      </el-table-column>

      <el-table-column label="工作描述" prop="jobDescription">
        <template slot-scope="scope">
          <div v-if="scope.row.jobDescription" v-html="scope.row.jobDescription"></div>
          <div v-else>无工作描述</div>
        </template>
      </el-table-column>


      <!-- 操作 -->
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗表单 -->
    <el-dialog
      :title="form.expId ? '编辑工作经历' : '新增工作经历'"
      :visible.sync="dialogVisible"
      width="550px"
      @close="resetForm"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="90px">
        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="form.companyName" placeholder="请输入公司名称" />
        </el-form-item>

        <el-form-item label="职位" prop="position">
          <el-input v-model="form.position" placeholder="请输入职位" />
        </el-form-item>

        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker
            v-model="form.startDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择开始日期"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker
            v-model="form.endDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择结束日期"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="工作描述" prop="jobDescription">
          <el-input
            v-model="form.jobDescription"
            type="textarea"
            :rows="3"
            placeholder="请输入工作描述"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getExperienceByEmpId, addExperience, updateExperience, delExperience} from "@/api/hrm/experience";

export default {
  name: "EmployeeWorkExperience",
  props: {
    empId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      workExperienceList: [],
      loading: false,
      dialogVisible: false,
      form: {
        expId: null,
        companyName: "",
        position: "",
        startDate: "",
        endDate: "",
        jobDescription: ""
      },
      rules: {
        companyName: [
          { required: true, message: "公司名称不能为空", trigger: "blur" }
        ],
        position: [
          { required: true, message: "职位不能为空", trigger: "blur" }
        ],
        startDate: [
          { required: true, message: "开始日期不能为空", trigger: "change" }
        ],
        endDate: [
          { required: true, message: "结束日期不能为空", trigger: "change" }
        ],
        jobDescription: [
          { required: true, message: "工作描述不能为空", trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    empId: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.loadData();
        }
      }
    }
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return '';
      return dateString.split('T')[0];
    },

    async loadData() {
      this.loading = true;
      try {
        const response = await getExperienceByEmpId(this.empId);
        this.workExperienceList = response.data || [];
      } catch (error) {
        this.$message.error("获取工作经历失败");
        console.error("获取工作经历失败:", error);
      } finally {
        this.loading = false;
      }
    },

    handleAdd() {
      this.resetForm();
      this.dialogVisible = true;
    },

    handleEdit(row) {
      this.form = { ...row };
      this.dialogVisible = true;
    },

    async handleDelete(row) {
      try {
        await this.$confirm('确定删除该工作经历吗？', '提示', {
          type: 'warning'
        });

        await delExperience(row.expId);
        this.$message.success('删除成功');
        this.loadData();
      } catch (error) {
        // 用户取消删除
      }
    },

    resetForm() {
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      this.form = {
        expId: null,
        companyName: "",
        position: "",
        startDate: "",
        endDate: "",
        jobDescription: ""
      };
    },

    submitForm() {
      this.$refs.form.validate(async valid => {
        if (!valid) return;

        try {
          const data = {
            ...this.form,
            empId: this.empId
          };

          if (this.form.expId) {
            await updateExperience(data);
            this.$message.success('更新成功');
          } else {
            await addExperience(data);
            this.$message.success('新增成功');
          }

          this.dialogVisible = false;
          this.loadData();
        } catch (error) {
          this.$message.error('保存失败');
        }
      });
    }
  },
  created() {
    if (this.empId) {
      this.loadData();
    }
  }
};
</script>

<style scoped>
h3 {
  margin-bottom: 10px;
}
</style>
